<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Sort</span></h1>
        <p>Table supports both single column and multiple column sorting.</p>
    </div>
    <app-demoActions github="table" stackblitz="tablesort-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Single Column</h5>
        <p-table [value]="products1" responsiveLayout="scroll">
            <ng-template pTemplate="header">
                <tr>
                    <th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
                    <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
                    <th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
                    <th pSortableColumn="quantity">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
                    <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                    <td>{{product.price | currency: 'USD'}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Multiple Columns</h5>
        <p>Use metakey to add a column to the sort selection.</p>

        <p-table [value]="products2" sortMode="multiple" responsiveLayout="scroll">
            <ng-template pTemplate="header">
                <tr>
                    <th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
                    <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
                    <th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
                    <th pSortableColumn="quantity">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
                    <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                    <td>{{product.price | currency: 'USD'}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Custom Sort</h5>
        <p-table [value]="products3" (sortFunction)="customSort($event)" [customSort]="true" responsiveLayout="scroll">
            <ng-template pTemplate="header">
                <tr>
                    <th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
                    <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
                    <th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
                    <th pSortableColumn="quantity">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
                    <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                    <td>{{product.price | currency: 'USD'}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tablesort-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Single Column&lt;/h5&gt;
    &lt;p-table [value]="products1"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th pSortableColumn="code"&gt;Code &lt;p-sortIcon field="code"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="name"&gt;Name &lt;p-sortIcon field="name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="category"&gt;Category &lt;p-sortIcon field="category"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="quantity"&gt;Quantity &lt;p-sortIcon field="quantity"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="price"&gt;Price &lt;p-sortIcon field="price"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.price | currency: 'USD'&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Multiple Columns&lt;/h5&gt;
    &lt;p&gt;Use metakey to add a column to the sort selection.&lt;/p&gt;

    &lt;p-table [value]="products2" sortMode="multiple"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th pSortableColumn="code"&gt;Code &lt;p-sortIcon field="code"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="name"&gt;Name &lt;p-sortIcon field="name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="category"&gt;Category &lt;p-sortIcon field="category"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="quantity"&gt;Quantity &lt;p-sortIcon field="quantity"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="price"&gt;Price &lt;p-sortIcon field="price"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.price | currency: 'USD'&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Custom Sort&lt;/h5&gt;
    &lt;p-table [value]="products3" (sortFunction)="customSort($event)" [customSort]="true"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th pSortableColumn="code"&gt;Code &lt;p-sortIcon field="code"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="name"&gt;Name &lt;p-sortIcon field="name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="category"&gt;Category &lt;p-sortIcon field="category"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="quantity"&gt;Quantity &lt;p-sortIcon field="quantity"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;th pSortableColumn="price"&gt;Price &lt;p-sortIcon field="price"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.price | currency: 'USD'&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Product &#125; from '../../domain/product';
import &#123; ProductService &#125; from '../../service/productservice';
import &#123; SortEvent &#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './tablesortdemo.html'
&#125;)
export class TableSortDemo implements OnInit &#123;

    products1: Product[];

    products2: Product[];

    products3: Product[];

    constructor(private productService: ProductService) &#123; &#125;

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(data =&gt; this.products1 = data);
        this.productService.getProductsSmall().then(data =&gt; this.products2 = data);
        this.productService.getProductsSmall().then(data =&gt; this.products3 = data);
    &#125;

    customSort(event: SortEvent) &#123;
        event.data.sort((data1, data2) => &#123;
            let value1 = data1[event.field];
            let value2 = data2[event.field];
            let result = null;

            if (value1 == null && value2 != null)
                result = -1;
            else if (value1 != null && value2 == null)
                result = 1;
            else if (value1 == null && value2 == null)
                result = 0;
            else if (typeof value1 === 'string' && typeof value2 === 'string')
                result = value1.localeCompare(value2);
            else
                result = (value1 &lt; value2) ? -1 : (value1 > value2) ? 1 : 0;

            return (event.order * result);
        &#125;);
    &#125;

&#125;
</app-code>

        </p-tabPanel>

        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tablesort-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
